<!--优秀案例-->
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" href="{% static 'img/logo.png' %}" type="image/x-icon"/>
    <title>囍管家——优秀案例</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-4.6.1-dist/css/bootstrap.min.css' %}">
    <link href="{% static 'plugins/style.css' %}" rel="stylesheet">
</head>
<body>
<div class="my-container">
    <!--标题-->
    <div class="case_title">
        <h1>{{ result.case_obj.name_case }}</h1>
        <div class="my-select-area">
            <label for="case-list"></label><select name="case-list" id="case-list" class="form-control my-select-input">
            {% for case_name,case_value in result.case_zip.items %}
                {% if result.case_obj.caseId == case_value %}
                    <option value="{{ case_value }}" selected>{{ case_name }}</option>
                {% else %}
                    <option value="{{ case_value }}">{{ case_name }}</option>
                {% endif %}
            {% endfor %}
        </select>
            <a type="button" class="btn btn-primary" id="go-case">跳转</a>
            <a href="/index/" type="button" class="btn btn-primary">回到主页</a>
        </div>
    </div>
    <!--轮播图-->
    <div id="app" data-state="0" data-case-count="{{ result.case_img_count }}">
        <div class="ui-big-images">
            {% for obj in result.img_list %}
                <div class="ui-big-image" data-key="{{ forloop.counter0 }}">
                    <img src="{% static obj %}" alt=""/>
                </div>
            {% endfor %}
        </div>
        <div class="ui-thumbnails">
            {% for obj in result.img_list %}
                <div class="ui-thumbnail" tabindex="-1" data-key="{{ forloop.counter0 }}">
                    <img src="{% static obj %}" alt=""/>
                    <div class="ui-cuticle" data-flip-key="cuticle"></div>
                </div>
            {% endfor %}
        </div>
        <div class="ui-content">

            <nav class="ui-nav">
                <button id="prev" tabindex="-1" title="Previous"><</button>
                <button id="next" tabindex="-1" title="Next">></button>
            </nav>

            <div class="ui-articles">
                {% for obj in result.img_list %}
                    <article class="ui-article" data-key="{{ forloop.counter0 }}">
                        <h2 class="ui-heading">囍管家</h2>
                        <p class="ui-paragraph">{{ result.case_note }}</p>
                    </article>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
</body>
<script src="{% static 'js/jquery-3.6.0.min.js' %}" type="text/javascript"></script>
<script src="{% static 'plugins/bootstrap-4.6.1-dist/js/bootstrap.min.js' %}"></script>
<script src='https://unpkg.com/flipping@1.1.0/dist/flipping.web.js'></script>
<script src="{% static 'js/excellentCase.js' %}"></script>
</html>